<script>
import store from "../../../store"
import { getShowImage, showToast, valIsEmpty } from "@/utils"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"

export default {
  name: "vocabularyPlanInfo",
  computed: {
    showToast() {
      return showToast
    },
  },
	props: {
		planInfo: Object,
	},
  methods: {
    valIsEmpty,
    getShowImage,
    //查看详情
    async viewDetail() {
			store.commit(vocabularyLearningActionType.mutations.planInfo, this.planInfo)
			uni.navigateTo({
				url: "/vocabulary/pages/currentPlanInfo/index"
			})
    },
    //制定计划
    async makePlan() {
			uni.navigateTo({ url: "/vocabulary/pages/makeLearningPlan/thesaurus" })
    },
  },
}
</script>

<template>
  <view class="component">
    <view class="left">
      <view class="title">
        <text v-if="!planInfo.planId">请先制定背单词打卡计划</text>
        <text v-else-if="!planInfo.isCurrentDayStudying">今日单词学习任务待完成</text>
        <text v-else>今日单词学习任务已完成</text>
      </view>
      <!--			词库进度-->
      <view class="process">
        <view class="process-number">
          <text>{{ planInfo.learnWordCount ? planInfo.learnWordCount : 0 }}</text>
          <text>\t/\t</text>
          <text>{{ planInfo.dailyWordCount ? planInfo.dailyWordCount : 0 }}</text>
        </view>
        <view class="process-bar">
          <view class="process-bar-content" :style="'width:' + (planInfo.learnWordCount / planInfo.dailyWordCount) * 100 + '%'"></view>
        </view>
      </view>
    </view>
    <view class="right">
      <view class="btn" @click="makePlan" v-if="!planInfo.planId">制定计划 </view>
      <view class="btn" @click="viewDetail" v-else>查看详情 </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  display: flex;
  justify-content: space-between;
  padding: {
    top: 30rpx;
		bottom: 70rpx;
  }
  width: 100%;
  .title {
    font-size: 40rpx;
    font-weight: 600;
		color: var(--text-color-white);
  }
  .process {
    margin-top: 20rpx;
    .process-number {
      font-size: 30rpx;
			color: var(--text-color-white);
    }
    .process-bar {
      height: 10rpx;
      border-radius: 5rpx;
      width: 360rpx;
      background: white;
      margin-top: 10rpx;
      overflow: hidden;
      .process-bar-content {
        border-radius: 5rpx;
        background: #2874a6;
        width: 0;
        height: 100%;
      }
    }
  }
  .right {
    width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      padding: 0 30rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      //border: 2rpx solid var(--text-color);
      border: 2rpx solid var(--text-color-white);
      font-size: 30rpx;
      border-radius: 40rpx;
			color: var(--text-color-white);
    }
  }
}
</style>
